<template>
  <view class="meter-list">
    <view
      v-for="item in list"
      :key="item.key"
      class="meter-item"
      @click="editMeter(item)"
      @longpress="openMoreAction(item)">
      <view class="name">{{ item.name }}</view>
      <view class="details">
        <view class="sn">SN: {{ item.SN }}</view>
        <view class="kwh">用电量: {{ item.kwh }} kWh</view>
      </view>
    </view>

    <view v-if="canEdit" class="page-bottom-btn" @click="addMeter()">新增电表</view>
    <uni-popup ref="popup" type="bottom">
      <view class="delete-btn" @click="deleteMeter()">删除电表</view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  name: 'meter',
  props: {
    projectInfo: {
      type: Object
    }
  },
  computed: {
    canEdit() {
      return this.projectInfo.canEdit
    }
  },
  watch: {
    projectInfo() {
      this.initData()
    }
  },
  data() {
    return {
      list: [],
      targetMeter: null
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.getProjectMeters()
    },
    getProjectMeters() {
      const self = this
      if (!this.projectInfo.id) return
      uni.request({
        url: '/project_dtu/list',
        data: {
          xm_id: this.projectInfo.id,
        },
        success(result) {
          if (result.data.success && Array.isArray(result.data.data)) {
            result.data.data.forEach((item) => {
              item.key = item.id;
              item.name = item.name || '';
            });
            self.list = result.data.data;
          }
        }
      })
    },
    addMeter() {
      if (!this.canEdit) return
      uni.navigateTo({
        url: `/pages/project-detail/add-meter/add-meter?projectId=${this.projectInfo.id}&canEdit=${this.canEdit}`
      })
    },
    editMeter(target) {
      if (!this.canEdit) return
      uni.navigateTo({
        url: `/pages/project-detail/add-meter/add-meter?projectId=${this.projectInfo.id}&id=${target.id}&canEdit=${this.canEdit}`
      })
    },
    deleteMeter() {
      const self = this
      if (!self.targetMeter) return
      this.$refs.popup.close()
      uni.request({
        url: '/project_dtu/del',
        data: {
          id: self.targetMeter.id
        },
        success(result) {
          if (result.data.success) {
            self.getProjectMeters()
            uni.showToast({
              icon: 'success',
              title: '删除成功'
            })
          }
        }
      })
    },
    openMoreAction(target) {
      if (!this.canEdit) return
      this.targetMeter = target
      this.$refs.popup.open()
    },
  }
}
</script>

<style scoped lang="scss">
.meter-list {
}
.meter-item {
  background-color: $white;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}
.name {
  font-size: $font-size-4;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.details {
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sn {
  // margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: $font-size-2;
  color: $text-secondary;
}
.kwh {
  font-size: $font-size-2;
  color: $text-secondary;
}
.delete-btn {
  background-color: $danger;
  color: $white;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: $font-size-4;
}
</style>
